<style lang="less" scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-breadcrumb {
    padding: 10px 15px 0;
}

.layout-content {
    min-height: 200px;
    margin: 15px;
    overflow: hidden; // background: #fff;
    border-radius: 4px;
}

.layout-content-main {
    padding: 10px;
}

.layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}

.layout-menu-left {
    // background: #464c5b;
    max-width: 20em;
    width: 18%;

    h2 {
        //   color:white;
        padding: 1em;
    }
    .my-title {
        text-decoration: none;
        font-size: 2em;
        color: #5b6270;
        display: inline-block;
        padding: 1em;
        padding-right: 0.6em;
    }
    .badge {
        background-color: #ff4081;
        padding: 0.2em;
        color: white;
        border-radius: 0.2em;
    }
}

.layout-menu-right {
    width: 79%;
}

.layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    .title {
        display: inline-block;
        line-height: 60px;
        font-size: 1.5em; // font-weight: bold;
    }
}

.layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}

.layout-ceiling-main a {
    color: #9ba7b5;
}

.layout-hide-text .layout-text {
    display: none;
}

.ivu-col {
    transition: width .2s ease-in-out;
}

.view {
    margin-top: 2.8em;
    min-height: 600px;
}
</style>
<template>
    <div class="layout">
        <Row type="flex">
            <div class="layout-menu-left" v-show="menu">
                <div class="header">
                    <a class="my-title">订单回填</a>
                    <span class="badge">2017</span>
                </div>
                <Menu theme="light" active-name="OrderList/0" :open-names="['1']" @on-select="handleSelect" width='auto'>
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="wand"></Icon>
                            订单物资管理
                        </template>
                        <Menu-group title="待办">
                            <Menu-item name="OrderList/0">待办订单</Menu-item>
                            <Menu-item name="OrderList/2">待审核</Menu-item>
                            <Menu-item name="OrderList/3">已审核</Menu-item>
                        </Menu-group>
                        <Menu-group title="审核">
                            <Menu-item name="AuditList">去审核</Menu-item>
                        </Menu-group>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="tshirt-outline"></Icon>
                            用户管理
                        </template>
                        <Menu-item name="UserIndex">基本信息</Menu-item>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="stats-bars"></Icon>
                            统计分析
                        </template>
                        <!-- <Menu-group title="概况"> -->
                        <Menu-item name="ReportIndex">订单统计</Menu-item>

                        <!-- </Menu-group> -->

                    </Submenu>
                </Menu>
            </div>
            <div class="layout-menu-right">
                <div class="layout-header box">
                    <i-button type="text" @click="toggleClick">
                        <Icon type="navicon" size="32"></Icon>
                    </i-button>
                    <span class="title">运维物资信息回填</span>
                    <div class="tool-bar box-cell-1 box cell-v-center cell-end">
                        <Button type="success" @click="logout">安全退出</Button>
                    </div>
                </div>

                <div class="layout-content">
                    <div class="layout-content-main">
                        <transition name="fade" mode="out-in">
                            <router-view class="view"></router-view>
                        </transition>
                    </div>
                </div>
                <div class="layout-copy">
                    2017-2020 &copy; 内蒙古联通
                </div>
            </div>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menu: true
        }
    },
    computed: {

    },
    mounted() {
        this.$router.push({ name: 'Orders' })
    },
    methods: {
        toggleClick() {
            this.menu = !this.menu
        },
        handleSelect(name) {
            console.log(name)
            if (name.indexOf('/') > 0) {
                let vname = name.split('/')[0]
                let step = name.split('/')[1]
                this.$router.push({ name: vname, params: { step } })
            } else {
                this.$router.push({ name })
            }
        },
        logout() {
            window.localStorage.token = null
            window.location.href = "/#/login"
        }
    }
}
</script>
